<template>
    <div id="app" style="margin-top: 300px;">
    <button @click="openToast('top','一只小猪猪在上面')">弹上面</button>
    <button @click="openToast('center','一只小猪猪在中间')">弹中间</button>
    <button @click="openToast('bottom','一只小猪猪在下面')">弹下面</button>
    <toast ref="toast"></toast>
    </div>
</template>
<script>
    import Toast from './components/Toast';
    export default {
        name: 'VueToast',
        data() {
            return{
            }
        },
         components: {
            Toast,
        },
        mounted() {
            },
        methods: {
            openToast(position, desc) {
                this.$refs.toast.openModel({
                    tip: `${desc}`,
                    position, // 默认是bottom
                    expires: 3000 // 默认是 2500 毫秒
                });
            }
        },
    }
</script>